 <ui:component xmlns="http://www.w3.org/1999/xhtml"
 	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:rich="http://richfaces.org/rich"
    xmlns:a4j="http://richfaces.org/a4j"
    xmlns:c="http://java.sun.com/jsp/jstl/core">

<a4j:outputPanel id="pnlDragAndDrop">

 <rich:dragIndicator id="indicator" />
 
 	<h:outputText value="#{missatge['wizard.controls.1']}" escape="false" styleClass="texteOutput"/>
 	<br/>

 
 <table>
 <tr>
 <td>
    
		<table>
		<tr>
		<td valign="top">
					<rich:panel>
						<f:facet name="header">
							<h:outputText value="Llista de FrameWorks / Especificacions" styleClass="texteOutput"/>
						</f:facet>
		
						<h:dataTable id="src" value="#{frameworks.frameworks}" var="framework" rows="10">
							<h:column>
								<a4j:outputPanel
									style="width:200px;border:1px solid gray;padding:2px">
									<rich:dragSource dragIndicator="indicator"
										type="#{framework.tecnologia}" dragValue="#{framework}">
										<h:outputText name="label" value="#{framework.nom}" />
									</rich:dragSource>
		
									<h:outputText value="#{framework.nom}" styleClass="texteOutput"></h:outputText>
								</a4j:outputPanel>
							</h:column>
						</h:dataTable>
						
	
						<rich:dataScroller for="src"/>
						                
					</rich:panel>
				</td>
				<td valign="top">		
					<rich:panel styleClass="dropTargetPanel">
						<f:facet name="header">
							<h:outputText value=".NET Frameworks" styleClass="texteOutput"/>
						</f:facet>
		
						<rich:dropTarget id="net" acceptedTypes=".NET" dropValue="NET"
							dropListener="#{frameworks.processDrop}" render="nettable, src">
						</rich:dropTarget>
		
						<h:dataTable id="nettable" value="#{frameworks.containerNET}" var="framework" rows="10">
							<h:column>
								<h:outputText value="#{framework.nom}" styleClass="texteOutput"></h:outputText>
							</h:column>
						</h:dataTable>
								

					<rich:dataScroller for="nettable"/>
					</rich:panel>
				</td>
				<td valign="top">	
					<rich:panel styleClass="dropTargetPanel">
						<f:facet name="header">
							<h:outputText value=".JEE Frameworks / Especificacions" styleClass="texteOutput" />
						</f:facet>
						<rich:dropTarget id="jee" acceptedTypes="JEE" dropValue="JEE" 
							dropListener="#{frameworks.processDrop}" render="jeetable, src">
						</rich:dropTarget>
		
						<h:dataTable id="jeetable" value="#{frameworks.containerJEE}" var="framework"  rows="10">
							<h:column>
								<h:outputText value="#{framework.nom}" styleClass="texteOutput"></h:outputText>
							</h:column>
						</h:dataTable>

						<rich:dataScroller for="jeetable"/>
				
					</rich:panel>
						
		</td>

		</tr>
		
		<tr>
		
		<td colspan="2">
			<a4j:commandButton action="#{frameworks.reset}" value="#{missatge['texte.torna']}"
			style="color:#{a4jSkin.generalCommandButtonColor}; text-decoration:none;"
			render="src,jeetable,nettable" styleClass="inPanel"/>
		</td>
		
		</tr>
	</table>

	</td>
	</tr>
	</table>
						
	</a4j:outputPanel>
	
</ui:component>
	



